xinkeaboard/xinkeaboard-web/pages/store/list/[...slug].vue

<template>
  <div>
    <SldHomeTopSearch />
    <NavCatHeader />
    <div class="self_background">
      <div class="sld_store_list">
      <img class="store_list_banner" :src="banneIMG" />
      <div class="seller_list_search clearfix">
        <input
          type="text"
          name="sellerName"
          :placeholder="L['请输入店铺名称']"
          v-model="keyWords"
          @keyup.enter="search_store(keyWords)"
        />
        <button @click="search_store(keyWords)">{{ L["搜索"] }}</button>
      </div>
      <div class="seller_list">
        <div class="fav_list fav_list_box clearfix">
          <template v-for="(item, index) in initData.data" :key="index">
            <StoreItem :item="item" :ItemIndex="index" :skeleton="firstLoading">
            </StoreItem>
          </template>
        </div>
      </div>
    </div>

    <!-- 分页 start -->
    <div class="flex_row_center_center sld_pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        v-model:currentPage="pageData.current"
        :page-size="pageData.pageSize"
        layout="prev, pager, next"
        :total="pageData.total"
        :hide-on-single-page="true"
      >
      </el-pagination>
    </div>
    <!-- 分页 end -->
    </div>


    <!-- 空页面 start-->
    <SldCommonEmpty v-if="!firstLoading && !initData.data.length" />
    <!-- 空页面 end-->
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import { ElPagination } from "element-plus";
import { getCurLanguage } from '@/composables/common.js';

const route = useRoute();
const router = useRouter();
// const L = lang_zn;
const L = getCurLanguage();
const firstLoading = ref(true); //是否第一次加载
const initData = reactive({ data: [] });
const pageData = reactive({
  current: 1,
  pageSize: 8,
  total: null,
});
const keyWords = ref("");
const routeParams = reactive({ data: {} });

const params = reactive({
  current: route.params.page,
  pageSize: pageData.pageSize,
});

const clacRouteParams = () => {
  let arr = route.params.slug;
  let newArr = {};
  for (let i in arr) {
    newArr[arr[i].toString().split("-")[0]] = arr[i].toString().split("-")[1];
  }
  routeParams.data = newArr;
  if (routeParams.data.current) {
    params.current = routeParams.data.current;
  }
  if (routeParams.data.keyword) {
    params.keyword = routeParams.data.keyword;
    keyWords.value = routeParams.data.keyword;
  }
  getInitData(params);
};

useHead({
  title: "Store List",
});

//获取banner图
const banneIMG = ref('')
const getBannerData = async () => {
  const { data: res } = await useFetch(
    apiUrl +
    "v3/system/front/setting/getSettings?names=default_image_store_list_top"
  );
  if (res._rawValue.state == 200) {
    banneIMG.value = res._rawValue.data[0] == null ? '/store_list_banner.png' : res._rawValue.data[0]
  }
};

getBannerData();

//初始化数据
const getInitData = async (params) => {
  let searchParams = { ...params };
  let keys = "";
  if (searchParams.keyword) {
    keys += searchParams.keyword;
  }
  if (searchParams.current) {
    keys += searchParams.current;
  }
  const { data: value, pending: pending } = await useFetch(
    apiUrl + "v3/seller/front/store/list",
    { params: params, key: keys.toString() }
  );
  const res = value._rawValue;
  if (!pending._rawValue) {
    firstLoading.value = false;
  }
  if (res.state === 200) {
    initData.data = res.data.list;
    pageData.current = res.data.pagination.current;
    pageData.pageSize = res.data.pagination.pageSize;
    pageData.total = res.data.pagination.total;
  }
};

//分页切换
const handleCurrentChange = (e) => {
  params.current = e;
  router.push({
    path: "/store/list/current-" + e,
  });
};

//店铺搜索
const search_store = (keyWord) => {
  if (keyWord == "") {
    router.push({
      path: "/store/list/current-1",
    });
  } else {
    router.push({
      path: "/store/list/current-1/keyword-" + keyWord,
    });
  }
  keyWords.value = routeParams.data.keyWord;
  params.keyword = keyWord;
  getInitData(params);
};

onMounted(() => {
  nextTick(() => {
    clacRouteParams();
  });
});
</script>

<style lang="scss" scoped>
@import "@/assets/style/storeList.scss";
@import "@/assets/style/base.scss";

.sld_pagination {
  width: 580px;
  margin: 0 auto;
 padding: 30px 0;
}
</style>